<template>
  <div ref="todayRecordTimeLine" style="width: 100%; height: 500px" />
</template>

<script setup lang="ts">
import { ref, computed, watch, type Ref, onMounted } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import { delay, useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
import { recordByDayLineApi } from "@/api/count";
import * as echarts from "echarts";

const { isDark } = useDark();
const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});
const todayRecordTimeLine = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(todayRecordTimeLine as Ref<HTMLDivElement>, {
  theme
});

// 获取接口数据
onMounted(() => {
  getData();
});

let dataList = [];
const dataList_x = [];
const dataList_y = [];

async function getData() {
  const result = await recordByDayLineApi(15);
  console.log("line图接口数据", result);
  if (result.code == 200) {
    dataList = result.data;

    dataList.forEach(item => {
      dataList_x.push(item.name);
      dataList_y.push(item.value);
    });
    setOptionsData(dataList_x, dataList_y);
  }
}

dataList.forEach(item => {
  dataList_x.push(item.name);
  dataList_y.push(item.value);
});

function setOptionsData(x, y) {
  setOptions({
    title: {
      text: "近期打卡情况"
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        z: 100,
        shadowStyle: {
          shadowColor: "rgba(167, 167, 167, 1)",
          shadowBlur: 10,
          color: "rgba(255, 255, 255, 1)"
        }
      },
      formatter: function (params) {
        console.log(params);
      }
    },
    grid: {
      top: 80,
      bottom: 20,
      left: 30,
      right: 20
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          show: false,
          alignWithLabel: true
        },
        axisLine: {
          lineStyle: {
            color: "#889fcc"
          }
        },
        data: x
      }
    ],
    yAxis: [
      {
        type: "value",
        minInterval: 1,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(136, 159, 204, .2)"
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#889fcc"
          }
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        z: 200,
        type: "line",
        smooth: true,
        symbolSize: 15,
        showSymbol: false,
        itemStyle: {
          normal: {
            show: false,
            color: "#3282FF", //改变折线点的颜色
            lineStyle: {
              color: "#3282FF" //改变折线颜色
            },
            label: {
              show: false, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "#999999",
                fontSize: 10
              }
            }
          },
          emphasis: {
            show: true,
            color: "#3282FF",
            borderColor: "#ffffff",
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "##fff",
                fontSize: 14
              }
            }
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(50,130,255,0.3)"
                },
                {
                  offset: 1,
                  color: "rgba(50,130,255,0)"
                }
              ],
              false
            ),
            shadowColor: "rgba(59, 34, 201,1)",
            shadowBlur: 10
          }
        },
        data: y
      },
      {
        z: 200,
        type: "bar",
        barWidth: "5",
        itemStyle: {
          normal: {
            color: "transparent"
          },
          emphasis: {
            color: "#2B75D4"
          }
        },
        data: y
      }
    ]
  });
}

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>
